/*
 * @description: 店铺概括
 * @Author: along
 * @Date: 2021-04-10
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="container manageLead">
        <div class="_banner">
            <template v-if="formData.bannerList.length">
                <div class="swiper-wrap-inner">
                    <el-carousel
                        :interval="5000"
                        :indicator-position="formData.bannerList.length > 1 ? '' : 'none'"
                        arrow="never"
                    >
                        <el-carousel-item
                            v-for="(item, index) in formData.bannerList"
                            :key="index"
                        >
                            <div
                                class="banner_img"
                                :style="{backgroundImage: 'url('+ item.image_url +')'}"
                                @click="fnGoBanner(item)"
                            />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </template>
        </div>
        <div :style="{width: '100%', minHeight: '12px',backgroundColor: 'rgba(245, 245, 245, 1)'}"></div>

        <!-- 数据概览 -->
        <div class="_view">
            <p class="_view_title">数据概览</p>
            <div class="_view_wrap">
                <div class="_view_items">
                    <div class="_items_header">
                        <img src="@/assets/image/lead_icon1.png" class="_items_icon">
                        <p class="_items_title">商品总数量</p>
                    </div>
                    <p class="_items_data">{{ formData.goods_count }}</p>
                </div>
                <div class="_view_items">
                    <div class="_items_header">
                        <img src="@/assets/image/lead_icon2.png" class="_items_icon">
                        <p class="_items_title">商品昨日浏览量</p>
                    </div>
                    <p class="_items_data">{{ formData.goods_view_day }}</p>
                </div>
                <div class="_view_items">
                    <div class="_items_header">
                        <img src="@/assets/image/lead_icon3.png" class="_items_icon">
                        <p class="_items_title">待发货订单</p>
                    </div>
                    <p class="_items_data">{{ formData.wait_ship_order_num }}</p>
                </div>
                <div class="_view_items">
                    <div class="_items_header">
                        <img src="@/assets/image/lead_icon4.png" class="_items_icon">
                        <p class="_items_title">维权订单</p>
                    </div>
                    <p class="_items_data">{{ formData.refund_order_num }}</p>
                </div>
            </div>
        </div>
        <div :style="{width: '100%', minHeight: '12px',backgroundColor: 'rgba(245, 245, 245, 1)'}"></div>

        <!-- 快捷入口 -->
        <div class="_view">
            <p class="_view_title">快捷入口</p>
            <div class="_side">
                <div
                    v-for="(row,index) in dataList"
                    :key="index"
                    class="_side_items"
                    @click="handleChangeType(index)"
                >
                    <p class="_side_icon">
                        <i :class="row.icon"></i>
                    </p>
                    <p class="_side_title">{{ row.title }}</p>
                </div>
            </div>
        </div>

        <!-- 退货地址弹窗 -->
        <adress-dialog
            ref="adressDialog"
            @close="fnCloseAdressDialog"
        />

        <!-- 提示收款账户填写弹窗 -->
        <account-Dialog
            ref="accountDialog"
            @close="fnCloseDialog"
        />
    </div>
</template>

<script>
import getZdAccountInfo from '@/assets/mixin/check-info';
import getRequire from '@/assets/mixin/check-info';
import getAdress from '@/assets/mixin/check-info';
import adressDialog from '@/components/manage/market/adress-dialog';
import accountDialog from '@/components/manage/market/account-dialog';

import { mapState } from 'vuex';
export default {
    components: {
        adressDialog,
        accountDialog
    },
    mixins: [getRequire, getZdAccountInfo, getAdress],
    data() {
        return {
            formData: {
                bannerList: [
                    {
                        banner_no: "bn_c8963183c0c6c",
                        image_url: "http://pic.wxhand.com/dev/phaadmin_image/38c5524d3e6d30c55db8e100f946487e.png",
                        jump_url: ""
                    },
                    {
                        banner_no: "bn_65426014e877d",
                        image_url: "http://pic.wxhand.com/dev/phaadmin_image/43e4a1028caedaf221a1abfa81bbccae.png",
                        jump_url: "http://gt.wxhand.com/manage/active/school-active-rule"
                    }
                ],
                goods_count: 0,//商品数量
                goods_view_day: 0,//商品昨日浏览量
                wait_ship_order_num: 0,//待发货订单数
                refund_order_num: 0,//维权订单数
            },
            dataList: [{
                icon: 'icon-jiahao iconfont',
                title: '发布商品'
            },{
                icon: 'icon-dingdan1 iconfont',
                title: '查看订单'
            },{
                icon: 'icon-caiwu2 iconfont',
                title: '财务管理'
            },{
                icon: 'icon-wanshanxiaoxi1 iconfont',
                title: '完善信息'
            }]
        };
    },
    filters: {
    },
    computed: {
    },
    watch: {
        ...mapState({

        })
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面
         */
        init () {
            this.$store.commit('header/SET_HEADER',[{ title: '校园商城' }, { title: '店铺概括' }]);
            this.fnGetData();
        },

        /**
         * @description 获取页面数据
         */
        fnGetData(){
            this.$post('/Shop/getIndexInfo', {}, resp => {
                if(resp.code == 1){
                    this.formData = {
                        ...resp.data
                    };
                }else{
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description banner跳转
         */
        fnGoBanner(item){
            if(item.jump_url){
                window.open(item.jump_url);
            }
        },

        /**
         * @description 快捷入口
         *      0:发布商品
         *      1:查看订单
         *      2:财务管理
         *      3:完善信息
         */
        handleChangeType(index) {
            if(index === 0) {
                this.getRequire().then(type => {
                // 无需验证支付账户
                    if(!type) {
                    //检测退货地址
                        this.getAdress().then(el => {
                            if(!el) {
                                this.$refs.adressDialog.show();
                                return false;
                            }
                            location.href = `${location.protocol}//${location.host}/good-edit-group?no=`;
                        });
                    }

                    // 需要验证支付账户
                    if(type) {
                    //检测支付账号
                        this.getZdAccountInfo(resp => {
                            if(resp == -1) {
                                this.$refs.accountDialog.show();
                                return;
                            } else {
                            //检测退货地址
                                this.getAdress().then(el => {
                                    if(!el) {
                                        this.$refs.adressDialog.show();
                                        return false;
                                    }
                                    location.href = `${location.protocol}//${location.host}/good-edit-group?no=`;
                                });
                            }
                        });
                    }
                });
            }

            if(index === 1) {
                this.$router.push({
                    name: 'orderList'
                });
            }

            if(index === 2) {
                this.$router.push({
                    name: 'accountSetting'
                });
            }

            if(index === 3) {
                this.$router.push({
                    name: 'shop'
                });
            }
        },

        /**
         * @description 关闭退货地址弹窗
         */
        fnCloseAdressDialog () {
            this.$refs.adressDialog.close();
        },

        //弹窗取消
        fnCloseDialog () {
            this.$refs.accountDialog.close();
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    ._banner {
        width: 100%;
        height: 228px;
        overflow: hidden;
        box-sizing: border-box;
        position: relative;
        .swiper-wrap-inner {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            top:0;
            .banner_img {
                width: 100%;
                height:100%;
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
            }
        }
    }
    ._view {
        width: 100%;
        min-height: 164px;
        background-color: #ffffff;
        ._view_title {
            width: 100%;
            height: 22px;
            margin-top: 16px;
            margin-bottom: 12px;
            box-sizing: border-box;
            padding-left: 23px;
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0px;
                width: 3px;
                height: 16px;
                background-color: rgba(32, 160, 255, 1);
            }
        }
        ._view_wrap {
            width: 100%;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 24px;
            ._view_items {
                width: calc((100% - 48px - 36px) / 4);
                height: 102px;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                &:hover {
                    background-color: rgba(249, 249, 249, 1);
                }
                ._items_header {
                    width: 100%;
                    height: 22px;
                    display: flex;
                    align-items: center;
                    margin: 12px 0 16px 0;
                    box-sizing: border-box;
                    padding-left: 24px;
                    ._items_icon {
                        width: 16px;
                        height: 16px;
                        margin-right: 12px;
                    }
                    ._items_title {
                        color: rgba(51, 51, 51, 1);
                        font-size: 14px;
                    }
                }
                ._items_data {
                    height: 32px;
                    line-height: 32px;
                    color: rgba(29, 32, 35, 1);
                    font-size: 32px;
                    font-weight: 500;
                    margin-left: 24px;
                }
            }
        }
        ._side {
            width: 100%;
            height: 62px;
            display: flex;
            align-items: center;
            cursor: pointer;
            ._side_items {
                width: calc((100% - 48px - 36px) / 4);
                height: 62px;
                display: flex;
                align-items: center;
                &:hover {
                    background-color: rgba(249, 249, 249, 1);
                }
                ._side_icon {
                    width: 30px;
                    height: 30px;
                    background-color: rgba(31, 160, 255, 1);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 40px;
                    margin-right: 12px;
                    i {
                        color: #ffffff;
                        font-size: 18px;
                    }
                }
                ._side_title {
                    color: rgba(51, 51, 51, 1);
                    font-size: 16px;
                }
            }
        }
    }
}
</style>

<style lang="less">
.manageLead {
    .el-carousel {
        height: 228px;
        .el-carousel__container {
            height: 228px;
        }
    }
}
</style>